<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">

    <script type="text/javascript" src="../static/jquery.min.js"></script>
    <script src="../static/layui/layui.js"></script>
</head>
<body>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addData">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteTest">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    </div>
</script>
<script type="text/html" id="rowtool">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="deleteRow">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="updateRow">编辑</button>
    </div>
</script>
<script type="text/html" id="edit-form">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
    </form>
</script>
<table id="demo1" lay-filter="test1"></table>
<table id="demo2" lay-filter="test2"></table>
<script>
    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table;
        var form = layui.form;
        //控件.render 进行初始化
        table.render({
            id: "t1",
            elem: '#demo1',//元素的id
            url: 'table.json',
            toolbar: '#toolbarDemo',
            page: true,
            cols: [[ //表头
                {type: 'checkbox'},
                {field: 'id', title: 'ID', width: 80, sort: true}
                , {field: 'name', title: '用户名', width: 80}
                , {field: 'age', title: '年龄', width: 80, sort: true}
                , {fixed: 'right', width: 150, align: 'center', toolbar: '#rowtool'}
            ]]
        });
        form.render()
        //toolbar中的参数是表格的lay-filter
        table.on('toolbar(test1)', function (obj) {
            var checkStatus = table.checkStatus('t1');//t1是初始化表格时候的id
            switch (obj.event) {
                case 'addData':
                    layer.open({
                            title: '编辑页面',
                            type: 1,
                            area: ['500px', '300px'],
                            content: $("#edit-form").html(), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                            btn: ['提交', '取消']
                            , yes: function (index, layero) {
                                //按钮【按钮一】的回调
                                layer.close(index);
                            },
                            btn2: function (index, layero) {
                                //按钮【按钮二】的回调
                                layer.close(index);
                            }
                        }
                    )
                    ;
                    break;
                case
                'deleteTest'
                :
                    console.log(checkStatus.data);
                    console.log(checkStatus.data.length);
                    console.log(checkStatus.isAll);
                    layer.msg('删除');
                    break;
                case
                'update'
                :
                    layer.msg('编辑');
                    break;
            }
            ;
        });
        //行工具栏
        table.on('tool(test1)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'deleteRow') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'updateRow') { //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    name: '123'
                    , age: '100'
                });
            }
        });
    })
</script>
</body>
</html>